<!DOCTYPE html>
<html><head>
<style type="text/css">
	td {
		background: lightblue;
		padding: 0.5em;
	}
	.grayscale {
		filter: url(#grayscale);
	}
	.blur {
		filter: url(#blur);
	}
	.grayscaleBlur {
		filter: url(#grayscaleBlur);
	}
</style>
</head><body>

<svg height="0" style="position:absolute">
	<defs>
		<filter id="grayscale">
			<feColorMatrix type="saturate" values="0" />
		</filter>
		<filter id="blur">
			<feGaussianBlur stdDeviation="1"/>
		</filter>
		<filter id="grayscaleBlur">
			<feColorMatrix type="saturate" values="0" />
			<feGaussianBlur stdDeviation="1"/>
		</filter>
	</defs>
</svg>
<!--div><script type="text/javascript">
var svgns = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(svgns, 'svg');
svg.setAttribute('heigth', '0');

var defs = document.createElementNS(svgns, 'defs');
svg.appendChild(defs);

var grayscaleF = document.createElementNS(svgns, 'filter');
grayscaleF.setAttribute('id', 'grayscale');
defs.appendChild(grayscaleF);

var grayscale = document.createElementNS(svgns, 'feColorMatrix');
grayscale.setAttribute('type', 'saturate');
grayscale.setAttribute('values', '0');
grayscaleF.appendChild(grayscale);

var blurF = document.createElementNS(svgns, 'filter');
blurF.setAttribute('id', 'blur');
defs.appendChild(blurF);

var blur = document.createElementNS(svgns, 'feGaussianBlur');
blur.setAttribute('stdDeviation', '1');
blurF.appendChild(blur);

var grayscaleBlurF = document.createElementNS(svgns, 'filter');
grayscaleBlurF.setAttribute('id', 'grayscaleBlur');
defs.appendChild(grayscaleBlurF);

var grayscale = document.createElementNS(svgns, 'feColorMatrix');
grayscale.setAttribute('type', 'saturate');
grayscale.setAttribute('values', '0');
grayscaleBlurF.appendChild(grayscale);

var blur = document.createElementNS(svgns, 'feGaussianBlur');
blur.setAttribute('stdDeviation', '1');
grayscaleBlurF.appendChild(blur);

svg.style.height = '0px';
document.body.appendChild(svg);
</script></div-->

<table><tr>
<td>normal</td>
<td class="grayscale">grayscale</td>
</tr><tr>
<td class="blur">blur</td>
<td class="grayscaleBlur">grayscaleBlur</td>
</tr></table>

<img src="barretr_Earth.png" width="100" height="100" />
<img class="grayscale" src="barretr_Earth.png" width="100" height="100" /><br />
<img class="blur" src="barretr_Earth.png" width="100" height="100" />
<img class="grayscaleBlur" src="barretr_Earth.png" width="100" height="100" />

</body></html>
